<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="content">
			<view class="title">
				<view class="list-cell b-b m-t" @click="selectBanks" hover-class="cell-hover" :hover-stay-time="50">
					<text class="cell-tit">{{bankName}}</text>
					<text class="cell-more yticon icon-you"></text>
				</view>
			</view>
			<view class="withdraw-content">
				<view class="withdraw-content-title">
					提现金额
				</view>
				<view class="withdraw-content-money">
					<text>￥</text><input type="text" v-model="money" :focus="focus" style="margin-left: 34rpx;"
						placeholder="0.00" />
				</view>
				<view class="withdraw-content-hasmoney">
					钱包余额 <text style="margin-left: 18rpx;">￥{{hasmoney-money >= 0?hasmoney-money:0.00}}</text>
				</view>
			</view>
			<view class="tips">
				<view class="tips-title">
					<image src="@/static/images/shuoming.png" style="width:24rpx;height:24rpx;margin-right:5rpx;">
					</image>
					<text class="tips-title-text">提现说明</text>
				</view>
				<text class="tips-content1">1、提现到银行卡T+1到账</text>
				<text class="tips-content2">2、每日可提现一次</text>
				<!-- <text class="tips-content2">3、提现扣除服务费5%</text> -->
			</view>

			<view class="tijiao" @tap="confirmSubmit">
				确定
			</view>

			<view class="mark" v-show="isShow">
				<view class="banks-list">
					<view class="banks-list-title">
						<text>选择到账银行卡</text>
						<image src="@/static/images/guanbi.png"
							style="width:23rpx;height:23rpx;position: absolute;right:50rpx;" @tap="cancle"></image>
					</view>
					<view class="banks-list-content">
						<view class="banks-list-item" v-for="(item,index) in banks"
							@tap="select(item.id,item.bank_name)">
							{{item.bank_name}}
						</view>
					</view>
					<view class="banks-list-button">
						<image src="@/static/images/tianjiaxinka.png" style="width:207rpx;height:66rpx;" @tap="addBank">
						</image>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '提现',
				money: '',
				hasmoney: '0.00',
				banks: [],

				bankName: '提现到银行卡',
				selectId: 0,
				focus: false,

				isShow: false,
			}
		},
		components: {

		},

		onLoad() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.loadData();

			uni.$on('changeHasmoney', () => {
				this.loadData();
			})
		},
		methods: {
			async loadData() {
				let token = uni.getStorageSync('token');
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: 1,
						token: token,
					},
					methods: 'post'
				})

				let info = res.data.data;
				this.hasmoney = parseFloat(info.hasmoney).toFixed(2);
				this.getBanks();
			},

			async getBanks() {
				let url = '/banks';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: uni.getStorageSync('token')
					},
					methods: 'post'
				})

				this.banks = res.data.data;
			},

			async selectBanks() {
				this.isShow = true;
			},

			async select(id, name) {
				this.selectId = id;
				this.bankName = name;
				this.isShow = false;
			},

			async cancle() {
				this.isShow = false;
			},

			async addBank() {
				uni.navigateTo({
					url: '/pages2_1/pages/add-bank/add-bank'
				})
			},

			confirmSubmit() {
				if (this.selectId <= 0) {
					this.$api.msg('必须选择银行卡！');
					this.selectBanks()
					return false;
				}
				if (this.money <= 0) {
					this.$api.msg('必须输入正确提现金额！');
					this.focus = true;
					return false;
				}

				uni.navigateTo({
					url: '/pages2/pages/withdraw-password/withdraw-password?bankId=' + this.selectId + '&money=' +
						this
						.money
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang="scss" scoped>
	.head-img {
		height: 248rpx;
		width: 100%;
	}

	.content {
		font-size: $font-base;
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		// #ifdef MP-WEIXIN
		padding-top: 160rpx;
		// #endif

		.title {
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			padding: 0 42rpx;
			border-bottom: 1px solid #ebebeb;

			.list-cell {
				display: flex;
				justify-content: space-between;

				.cell-tit {
					color: #38a9f2;
				}
			}

		}

		.withdraw-content {
			background-color: #fff;
			padding: 0 42rpx;
			border-bottom: 1px solid #ebebeb;
			height: 226rpx;
			line-height: 75rpx;

			.withdraw-content-title {
				// font-weight: bold;
			}

			.withdraw-content-money {
				display: flex;
				align-items: center;
				justify-content: left;
				color: #f2421b;
			}

			.withdraw-content-hasmoney {
				// font-weight: bold;
			}
		}

		.tips {
			padding: 20rpx 42rpx;
			background-color: #fff;
			line-height: 44rpx;
			width: 100%;
			// height:226rpx;
			color: #555555;
			font-size: 26rpx;

			.tips-title {
				line-height: 60rpx;
				height: 60rpx;
				color: #333333;
				display: block;
				font-size: $font-base;
			}

			.tips-content1,
			.tips-content2 {
				display: block;
			}

		}

		.tijiao {
			margin: 60rpx 42rpx;
			background-color: #f3431a;
			height: 74rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			color: #fff;
			letter-spacing: 19rpx;
		}

		.uni-input-input {
			width: 100% !important;
		}

		.mark {
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0rpx;
			bottom: 0rpx;
			background: rgba(0, 0, 0, 0.5);
			box-shadow: 2px -3px 100px -5px #FFFFFF;

			.banks-list {
				position: absolute;
				height: 500rpx;
				bottom: 0rpx;
				background-color: #fff;
				width: 100%;

				.banks-list-title {
					height: 102rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1px solid #ebebeb;
					position: relative;
				}

				.banks-list-content {
					padding: 30rpx 0;

					.banks-list-item {
						height: 60rpx;
						line-height: 60rpx;
						display: flex;
						justify-content: center;
					}

				}

				.banks-list-button {
					padding-top: 20rpx;
					display: flex;
					justify-content: center;
				}
			}
		}
	}

	.psd2-title {
		position: relative;
		font-size: 30rpx;

		.psd2-title-cancle {
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			top: 0;
			right: 30rpx;
		}
	}

	.wd-content {
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		font-size: $font-base;

		.wd-content-money {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 550;

			.wd-content-moneym {
				font-size: 50rpx;
			}
		}
	}

	.psd2-content {
		display: flex;
		justify-content: space-between;
		padding: 0 50rpx 35rpx;

		.password2-item {
			background-color: #f7f7f7;
			width: 66rpx;
			height: 80rpx;
			border-radius: 10rpx;
			padding: 10rpx;
			text-align: center;
		}
	}

	.forget {
		font-size: $font-base;
		padding-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 50rpx 35rpx;
	}
</style>
